import logo from './logo.svg';
import './App.css';
import { CSVLink, CSVDownload } from "react-csv";
import { useEffect } from 'react';
import { useState } from 'react';
import { useRef } from 'react';


function App() {
  // const csvData = [
  //   ["firstname", "lastname", "email"],
  //   ["Ahmed", "Tomi", "ah@smthing.co.com"],
  //   ["Raed", "Labes", "rl@smthing.co.com"],
  //   ["Yezzi", "Min l3b", "ymin@cocococo.com"],
  //   ['Yezzi\"带哦掉ddhia\"动画的daidaih', "Min l3b", "ymin@cocococo.com"],
  //   ['Yezzi\\\\"带哦掉ddhia\"动画的daidaih', "Min l3b", "ymin@cocococo.com"],
  //   // ['Yezzi\\\"带哦掉ddhia\"动画的daidaih', "Min l3b", "ymin@cocococo.com"],
  //   ['Yezzi\"带哦掉ddhia\"动画的daidaih', "Min l3b", "ymin@cocococo.com"],
  //   ["Yezzi\\\"带哦掉ddhia\"动画的daidaih", "Min l3b", "ymin@cocococo.com"],
  //   // ["Yezzi\\"带哦掉ddhia\\\"动画的daidaih", "Min l3b", "ymin@cocococo.com"],
  //   [`Yezzi\\"带哦掉ddhia\\\"动画的daidaih`, "Min l3b", "ymin@cocococo.com"],
  //   [`Yezzi\"带哦掉ddhia\\\"动画的daidaih`, "Min l3b", "ymin@cocococo.com"],
  //   [`Yezzi\"带哦掉ddhia\\\"动画的daidaihNIVO\"`, "CA209Min l3b", "ymin@cocococo.com"],

  //   ["Yezzi\"拉拉拉哒嘀哒", "Min l3b\"你小子", "ymin@cocococo.com"]
  // ];

  // useState

  // const [data, setData] = useState({ hits: [] });

  const csvData = [
   
  {
      studydi:`Yezzi\"带哦掉ddhia\\\"动画的daidaihNIVO\"`,
      sutdyId: "CA209Min l3b",
      email: "ymin@cocococo.com",
    },
    {
      studydi:"Yezzi\\\"带哦掉ddhia\"动画的daidaih",
      sutdyId: "CA209Min l3b",
      email: "ymin@cocococo.com",
    },
    {
      studydi:"Yezzi\\\"带哦掉ddhia\"动画的daidaih",
      sutdyId: "CA209Min l3b",
      email: "ymin@cocococo.com",
    },
    {
      studydi:`Yezzi\"带哦掉ddhia\\\"动画的daidaihNIVO\"`,
      sutdyId: "CA209Min l3b",
      email: "ymin@cocococo.com",
    },
  ];

  const [data, setData] = useState({ csvData: csvData});
  const countRef = useRef(0);
  const dataRef= useRef({ csvData: csvData});

  console.log("csvData");
  console.log(csvData);
  // useRef
// Example POST method implementation:
async function postData(url = '', data = {}) {
  // Default options are marked with *
  const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data) // body data type must match "Content-Type" header
  });
  return response.json(); // parses JSON response into native JavaScript objects
}

// postData('https://example.com/answer', { answer: 42 })
//   .then(data => {
//     console.log(data); // JSON data parsed by `data.json()` call
//   });

  // tenantServiceList
  // "http://localhost:3000/api/v1/studies"
  // let url = "http://localhost:8003/api/all/tenantServiceList";
  // // fetch(url, {}).then(res=>{
  // //   console.log(res);
  // // })
  // postData(url, { answer: 42 })
  // .then(data => {
  //   console.log(data); // JSON data parsed by `data.json()` call
  // });


  useEffect( () => {
    let url = "http://localhost:8003/api/all/tenantServiceList";
  // fetch(url, {}).then(res=>{
  //   console.log(res);
  // })
  postData(url, { answer: 42 })
  .then(res => {
    console.log(res); // JSON data parsed by `data.json()` call
    setData({csvData:res.response})
    // dataRef.csvData=res.response;
  });
  },[]);

  // let url = "http://localhost:8003/api/all/tenantServiceList";
  // // fetch(url, {}).then(res=>{
  // //   console.log(res);
  // // })
  // postData(url, { answer: 42 })
  // .then(data => {
  //   console.log(data); // JSON data parsed by `data.json()` call
  //   setData({csvData:data.response})
  // });


  // useEffect(async () => {
  //   // const result = await axios(
  //   //   'http://localhost/api/v1/search?query=redux',
  //   // );

  //   // setData(result.data);
  //   let url = "http://localhost:8003/api/all/tenantServiceList";

  // let  data=await postData(url, { answer: 42 })
  // console.log(data); // JSON data parsed by `data.json()` call
  // setData({csvData:data.response})
  // // .then(data => {
  // //   console.log(data); // JSON data parsed by `data.json()` call
  // //   setData({csvData:data.response})
  // // });
  // },[setData]);


  // useEffect(async () => {
  //   const result = await axios(
  //     'http://localhost/api/v1/search?query=redux',
  //   );

  //   setData(result.data);
  // });
  // useEffect
  // data={data.csvData}>Download me
  // data={dataRef.csvData}>Download me
          //  data={csvData}>Download me
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <CSVLink
        style={{textDecoration:"unset"}}
        
        data={data.csvData}>Download me

         </CSVLink>;
  {/* // or */}
  {/* <CSVDownload data={csvData} target="_blank" />; */}
  
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;
